<template>
  <div class="my-input" tabindex="-1" :class="{'active-border': drapdownshow}"
       v-clickoutside="handleClickOutSide">
    <div class="input-box">
      <div class="cover-box" @click="coverIsShowFun" v-show="coverIsShow">
        {{inputBoxValue}}
      </div>
      <el-input
        @focus="elInputFocus"
        v-model="inputValue"
        ref="elInput"
        :placeholder="placeholder"></el-input>
      <i slot="suffix" class="el-input__icon el-icon-close clear-icon" @click.stop="clearInputValue"></i>
    </div>
    <!--<i class="el-icon-circle-close" @click.stop="clearCheckedValue" v-if="checkedValue.length > 0"></i>-->
    <transition enter-class="el-zoom-in-top-enter" enter-active-class="el-zoom-in-top-enter-active"
                leave-class="el-zoom-in-top-leave" leave-active-class="el-zoom-in-top-leave-active"
                leave-to-class="el-zoom-in-top-leave-to">
      <div v-show="drapdownshow" class="drapdown">
        <el-scrollbar style="height: calc(100% - 0px)">
          <div class="tab">
            <ul style="margin: 0;padding: 0">
              <li
                class="tab-item"
                v-for="(item,index) in selectOptions"
                :key="item.name"
                :class="{'item-selected': item.checked}"
                @click.stop="handleCheckedValuesChange(item.name)">{{item.name}}
              </li>
            </ul>
            <!--<el-checkbox-group v-model="checkedValue" @change="handleCheckedValuesChange">-->
            <!--<el-checkbox style="display: block;margin: 0 20px;padding: 0;" v-for="item in checkData" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>-->
            <!--</el-checkbox-group>-->
          </div>
        </el-scrollbar>
        <!--<div class="selectAll">-->
        <!--<el-checkbox style="display: block;font-weight:600;margin: 0 20px;padding: 0;" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{$t('select.selectAll')}}</el-checkbox>-->
        <!--</div>-->
      </div>
    </transition>
    <!--</el-collapse-transition>-->
  </div>
</template>

<script>
  import clickoutside from './clickoutside';

  export default {
    name: 'myInput',
    props: {
      options: Array,
      value: String,
      urlPort: {
        type: String,
        default: '/product/dropselect/name'
      },
      inputName: {
        type: String,
        default: 'sold_to'
      },
      placeholder: {
        type: String,
        default: 'Please Input'
      }
    },
    directives: {
      'clickoutside': clickoutside
    },
    data() {
      return {
        drapdownshow: false,
//        checkAll: false,
        checkData: this.options,
        checkedValue: [],
        isIndeterminate: false,
        filterValue: '',

        inputValue: '',
        selectOptions: [],
        coverIsShow: false
      };
    },
    computed: {
      // checkData: {
      //   get () {
      //     return this.options
      //   },
      //   set()
      // }
      inputBoxValue() {
        if (this.checkedValue.length === 0) {
          this.coverIsShow = false;
          return ''
        } else if (this.checkedValue.length === 1) {
          this.coverIsShow = true;
          return this.checkedValue[0]
        } else {
          this.coverIsShow = true;
          return this.checkedValue[0] + ` (+${this.checkedValue.length - 1})`
        }
      }
    },
    watch: {
      options(n) {
        this.checkData = n;
//        this.checkCheckedValuesStatus()
      },
      checkData() {
//        this.checkCheckedValuesStatus()
      },
      value(n) {
        this.checkedValue = n;
//        this.checkCheckedValuesStatus()
      },
      filterValue(n) {
        if (n == '') {
          this.checkData = this.options
        } else {
          this.checkData = this.options.filter(v => {
            return v.value.toLowerCase().includes(n.toLowerCase())
          })
        }
      },
      inputValue(newValue, oldValue) {
        this.loadSelectOptions(newValue);
        this.checkedValue = [];
      }
    },
    methods: {
      clearInputValue() {
        this.inputValue = '';
        this.$emit('getInputData', []);
      },
      elInputFocus() {
        if (this.inputValue !== '') {
          this.drapdownshow = true;
        }
      },
      coverIsShowFun() {
        this.coverIsShow = false;
        this.$refs.elInput.focus();
      },
      async loadSelectOptions(val) {
        let _this = this;
        let params;
        if (this.urlPort === '/product/dropselect/name') {
          params = {
            name: val,
            flag: this.inputName
          };
        } else {
          params = {
            value: val,
            field: this.inputName
          };
        }
        try {
          let res = await this.axios.post(this.urlPort, params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.length !== 0) {
              this.drapdownshow = true;
              this.selectOptions = resData.data.map(item => {
                return {name: item, checked: false}
              })
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      checkFirst() {
        //filterBox摁enter触发事件，el-input不支持@keyup.enter
        this.checkedValue = this.checkData[0];
        this.drapdownshow = false;
        this.filterValue = '';
      },
//      clearCheckedValue(){
//        this.checkedValue=[];
//        this.$emit('input', this.checkedValue);
//        this.$emit('change', this.checkedValue)
//      },
      handleClickOutSide() {
        this.drapdownshow = false;
//        if(this.checkedValue.length!==0){
//            this.coverIsShow=true;
//        }else {
//          this.coverIsShow=false;
//        }
//        console.log(this.checkedValue, 'this.checkedValue222');
//        this.$emit('getInputData', this.checkedValue);
//        this.$emit('change', this.checkedValue)
      },
//      handleCheckAllChange(val) {
//        this.checkedValue = val ? this.options.map(v => v.value) : [];
//        this.isIndeterminate = false;
//        this.$emit('input', this.checkedValue);
//        this.$emit('change', this.checkedValue)
//      },
      handleCheckedValuesChange(n) {
//        let checkedCount = this.checkedValue.length;
//        this.checkAll = checkedCount === this.checkData.length;
//        this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkData.length;
        this.selectOptions.forEach((item, index) => {
          if (n === item.name) {
            if (item.checked) {
              item.checked = false;
              this.checkedValue = this.checkedValue.filter(item1 => {
                return item1 !== item.name
              })
            } else {
              item.checked = true;
              this.checkedValue.push(item.name)
            }
          }
        });
//        this.drapdownshow=false;
//        this.filterValue='';
//        this.$emit('input', this.checkedValue);
        this.$emit('getInputData', this.checkedValue);
        this.$emit('change', this.checkedValue)
      },
//      checkCheckedValuesStatus() {
//        let checkedCount = this.checkedValue.length;
//        this.checkAll = checkedCount === this.checkData.length;
//        this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkData.length;
//      },
      // clearCheckedValue() {
      //   this.checkedValue = []
      //   this.$emit('input', this.checkedValue)
      //   this.handleCheckedValuesChange()
      // },
      show() {
        this.drapdownshow = true;
      },
    },
    mounted() {
//      this.checkCheckedValuesStatus()
    }
  };
</script>

<style lang="scss" scoped>
  .my-input {
    .input-box {
      position: relative;
      .cover-box {
        position: absolute;
        display: inline-block;
        width: 100%;
        height: 100%;
        z-index: 100;
        text-align: left;
        line-height: 40px;
        padding-left: 15px;
        cursor: text;
        background: white;
        border: 1px solid #d8dce5;
        border-radius: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .clear-icon {
        position: absolute;
        display: none;
        cursor: default;
        top: 0;
        right: 4px;
        color: #b4bccc;
      }
      &:hover .clear-icon {
        display: block;
      }
    }
    cursor: pointer;
    user-select: none;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    /*width: 240px;*/
    /*height: 40px;*/
    width: 100%;
    /*border: 1px solid #bfcbd9;*/
    background-color: #fff;
    border-radius: 4px;
    outline: none;
    color: #5a5e66;
    .select {
      position: relative;
      padding-left: 20px;
      label {
        display: inline-block;
        cursor: pointer;
        font-size: 14px;
        font-family: sans-serif;
        font-weight: 530;
        line-height: 40px;
        height: 40px;
        width: calc(100% - 35px);
        color: #bfcbd9;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      i {
        position: absolute;
        display: none;
        right: 4px;
      }
      .label-span {
        line-height: 40px;
        color: #999;
      }
      .el-icon-arrow-down, .el-icon-circle-close {
        position: absolute;
        color: #999;
        line-height: 40px;
        right: 20px;
        transition: transform 0.3s;
        z-index: 999;
      }
      .icon-180 {
        transform: rotate(-180deg);
        transition: transform 0.3s
      }
      &:hover .el-input__icon {
        display: inline-block;
      }
    }

    .drapdown {
      position: absolute;
      /*width: calc(100% + 140px);*/
      /*width: 240px;*/
      /*right: calc(100% - 240px);*/
      top: 50px;
      background-color: #fff;
      /*width: 100%;*/
      height: 222px;
      border: 1px solid #d1dbe5;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      /*box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);*/
      border-radius: 4px;
      z-index: 2003 !important;
      &:after {
        position: absolute;
        top: -4px;
        left: calc(20% - 10px);
        content: '';
        display: inline-block;
        background: #fff;
        width: 6px;
        height: 6px;
        border-top: 1px solid #d1dbe5;
        border-right: 1px solid #d1dbe5;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
      }
      .tab {
        position: relative;
        width: 100%;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        color: #999;
        ul {
          .tab-item {
            display: block;
            padding: 0 20px;
            width: 100%;
            color: #5a5e66;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /*border-bottom: 1px solid #bfcbd9;*/
            &:hover {
              background: #f5f7fa;
            }
          }
          .item-selected {
            color: #409EFF;
            font-weight: 700
          }
          .item-selected:after {
            position: absolute;
            right: 20px;
            font-weight: 700;
            -webkit-font-smoothing: antialiased;
            font-family: element-icons;
            content: "\E611";
            font-size: 12px;
            color: #409EFF;
          }
        }
      }
      .filterBox, .selectAll {
        /*background: red;*/
        height: 40px;
      }
      .selectAll {
        border-top: 1px solid #d1dbe5;
      }
      .filterBox {
        border-bottom: 1px solid #d1dbe5;
        .el-input {
          input {
            /*margin: 0 20px;*/
            /*line-height: 36px;*/
            /*font-size: 16px;*/
            /*color: #666;*/
            /*border: 0;*/
            /*max-width: calc(100% - 40px);*/
            /*outline: none;*/
          }
        }
      }
      .el-scrollbar {
        /*border-top: 1px solid #bfcbd9;*/
      }
    }
  }

  .active-border {
    border-color: #409eff;
  }

  .slide-fade-enter-active {
    transition: all .3s ease;
  }

  .slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(10px);
    opacity: 0;
  }
</style>

<style lang="scss">
  .my-input {
    .el-scrollbar__wrap {
      overflow-x: hidden !important;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #66cc99;
      border-color: #66cc99;
    }
    .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: #66cc99;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #999;
    }
    .el-checkbox__label {
      color: #999;
    }
  }
</style>
